<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-button  v-if="isAuth('sys:dicgroup:add')"  @click="handlerAdd">添加</el-button>
    <el-button type="primary" v-if="isAuth('sys:dicgroup:edit')"  @click="handlerEdit">编辑</el-button>
    <el-button type="danger" v-if="isAuth('sys:dicgroup:delete')" @click="handleDelete">删除</el-button>
  </div>

<el-row>
  <el-col :span="4" style='margin-top:15px;'>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      node-key="dicGpId"
      highlight-current
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="dicGroupTree"
      @node-click="getNodeData"
      >
    </el-tree>
  </el-col>
  <el-col :span="20" style='margin-top:15px;'>
     <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-info"></i>字典组信息</span>
        </div>
      <el-form :label-position="labelPosition" :rules="formRules" label-width="80px" :model="form" ref="form">
        <el-row>
          <el-col :span="12">
          <el-form-item label="字典编码" prop="code">
              <el-input v-model="form.code" :disabled="formEdit" placeholder="请输入字典编码"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="字典名" prop="name">
              <el-input v-model="form.name" :disabled="formEdit"  placeholder="请输入标题"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="父级节点" prop="parentId">
            <el-input v-model="form.parentId" :disabled="formEdit" placeholder="请输入父级节点" readonly></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="描述"   prop="descp">
            <el-input v-model="form.descp" :disabled="formEdit" placeholder="请输入描述"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="字典級別" prop="level">
            <el-input v-model="form.level" v-show="isShow" placeholder="字典級別" ></el-input>
            <el-select v-model="dicLevelValue" @change="dicLevelChange" placeholder="请选择">
              <el-option
                v-for="item in dicLevels"
                :key="item.code"
                :label="item.name"
                :value="item.code"
                >
              </el-option>
            </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="字典类别"   prop="type">
            <el-input v-model="form.type" v-show="isShow" ></el-input>
            <el-select v-model="dicTypeValue" @change="dicTypeChange" placeholder="请选择">
              <el-option
                v-for="item in dicTypes"
                :key="item.code"
                :label="item.name"
                :value="item.code"
                >
              </el-option>
            </el-select>
        </el-form-item>
        </el-col>
        </el-row>
        <el-form-item v-if="formStatus == 'update'">
          <el-button type="primary">更新</el-button>
          <el-button>取消</el-button>
        </el-form-item>
        <el-form-item v-if="formStatus == 'create'">
          <el-button type="primary" @click="createDicGp">保存</el-button>
          <el-button @click="onCancel" >取消</el-button>
        </el-form-item>
      </el-form>
     </el-card>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><i class="el-icon-tickets"></i>字典项</span>
        </div>
         <group-detail :dicGpId='currentId' ref="groupDetail" v-show="showGroupDetail" ></group-detail>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>

<script>
import groupDetail from './dicgroupdetail';
export default {
  name: "dicgroup",
  components: {
     groupDetail
    },
  data() {
    return {
      filterText: "",
      list: null,
      total: null,
      isShow:false,
      formEdit: true,
      formAdd: true,
      formStatus: "",
      showGroupDetail: false,
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      labelPosition: "right",
      form: {
        code: undefined,
        name: undefined,
        parentId: undefined,
        type: undefined,
        level: undefined,
        descp: undefined,
        path: undefined
      },
      formRules: {
        code:[
           { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        name:[
           { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      dicLevels: [{ //字典级别
          code: 0,
          name: '系统'
        }, {
          code: 1,
          name: "用户"
      }],
      dicLevelValue: 0,
      dicTypes: [{ //字典类型
          code: '0',
          name: '表格'
        }, {
          code: '1',
          name: "树形"  
      }],
      dicTypeValue:'0',
      currentId: -1
    };
  },
  created() {
    this.getList();
  },
  watch: {
    filterText(val) {
      this.$refs.dicGroupTree.filter(val);
    }
  },
  methods: {
    getList() {
      this.$http({
        url: this.$http.adornUrl("/sys/dicgroup/tree"),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.success) {
          this.treeData = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getNodeData(data) {
      //树节点点击事件，加载字典详情
      //console.log(data);
      if (!this.formEdit) {
        this.formStatus = "update";
      }
      this.form = data;
      this.currentId = data.dicGpId; //记录当前选中的树ID
      this.dicLevelValue = data.level;//当前记录字典级别
      this.dicTypeValue = data.type;//当前记录字典类型
      this.showGroupDetail = true;
      this.$refs.groupDetail.dicGpId =  data.dicGpId;
      this.$refs.groupDetail.getList(); //加载组件数据
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = "update";
      }
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;    
      this.formStatus = "create";
    },
    handleDelete() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
         this.$http({
            url: this.$http.adornUrl("/sys/dicgroup/delete/"+this.currentId),
            method: "get",
            data: this.$http.adornData({})
          }).then(({ data }) => {
            if (data && data.success) {
              this.getList();
              this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
            } else {
              this.$message.error(data.msg);
            }
          });
      });
    },
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList();
        this.$notify({
          title: "成功",
          message: "更新成功",
          type: "success",
          duration: 2000
        });
      });
    },
    createDicGp() { //创建字典组
      console.log(this.form);
      this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl("/sys/dicgroup/save"),
              method: "post",
              data: this.$http.adornData(this.form)
            }).then(({ data }) => {
              if (data && data.success) {
                this.getList();
                this.$notify({
                    title: "成功",
                    message: data.msg,
                    type: "success",
                    duration: 2000
                });
            } else {
              this.$message.error(data.msg);
            }
          });
          } else {
              console.log('error submit!!');
              return false;
          }
        });
      
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = "";
    },
    resetForm() {
      this.form = {
        code: undefined,
        name: undefined,
        parentId: this.currentId,
        path: undefined,
        level: this.dicLevelValue,
        type:this.dicTypeValue,
        descp: undefined,
        path: undefined

      };
    },
    dicLevelChange(data) { //字典级别下拉change事件
      this.form.level = data;
    },
    dicTypeChange(data) { //字典级别下拉change事件
      this.form.type = data;
    }
  }
};
</script>

